<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片上传</title>
    <link rel="stylesheet" href="fontawesome/css/all.min.css">
    <link rel="stylesheet" href="css/templatemo-style.css" charset="utf-8">
    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/getParameter.js"></script>
    <script src="js/form.js"></script>
	<!--
    Template 2105 Input
	http://www.tooplate.com/view/2105-input
	-->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/materialize.min.css">
    <link rel="stylesheet" href="css/tooplate.css">
</head>

<body id="application">
    <div class="container">
        <div class="row">
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12  mx-auto">
                <header class="mt-5 mb-5 text-center">
                    <h3>图片上传</h3>
                    <p class="tm-form-description">Pellentesque vel nisi vulputate, malesuada augue vitae, vulputate nisi. Integer consequat consqquat feugiat.</p>
                </header>
                <form id="uploadForm" action="/photograph/photo/insertImg" onsubmit="return jump()" method="post" enctype="multipart/form-data" class="tm-form-white tm-font-big">
                    <div class="tm-bg-white tm-form-pad-big">
                        <div class="form-group mb-5">
                            <input id="uid" name="uid" type="hidden" class="validate tm-input-white-bg">
                            <label for="name" class="black-text mb-4 big">您的姓名</label>
                            <input id="name" name="name" type="text" readonly class="validate tm-input-white-bg">
                        </div>
                        <div class="form-group mb-5">
                            <label for="iname" class="black-text mb-4 big">作品名字</label>
                            <input id="iname" name="iname" type="text" class="validate tm-input-white-bg">
                        </div>
                        <div class="form-group mb-5">
                            <label for="itag" class="black-text mb-4 big">标签(每个关键词用"/"隔开，如"人/动物/帅哥")</label>
                            <input id="itag" name="itag" type="text" class="validate tm-input-white-bg">
                        </div>
<!--                        <div class="form-group mb-5">-->
<!--                            <label for="address1" class="black-text mb-4 big">Mailing Address</label>-->
<!--                            <input id="address1" name="address1" type="text" class="validate tm-input-white-bg mb-4">-->
<!--                            <input id="address2" name="address2" type="text" class="validate tm-input-white-bg mt-1">-->
<!--                        </div>-->
                        <div class="row">
                            <div  id="category" class="form-group col-xl-6 col-lg-6 col-md-6 col-12 pl-0 tm-form-group-2-col tm-form-group-2-col-l">
                                <label for="category" class="black-text mb-4 big">分类</label>
                                <select name="category" style="display: block" >
<!--                                    <option value="-">默认</option>-->
<!--                                    <option value="Bangkok">Bangkok</option>-->
<!--                                    <option value="Yangon">Yangon</option>-->
<!--                                    <option value="Singapore">Singapore</option>-->
<!--                                    <option value="Tokyo">Tokyo</option>-->
                                </select>
                            </div>
<!--                            <div class="form-group col-xl-6 col-lg-6 col-md-6 col-12 pr-0 tm-form-group-2-col tm-form-group-2-col-r">-->
<!--                                <label for="zipcode" class="black-text mb-4 big">Zip Code</label>-->
<!--                                <input id="zipcode" name="zipcode" type="text" class="validate tm-input-white-bg mb-4">-->
<!--                            </div>-->
                        </div>

<!--                        <div class="form-group mb-5">-->
<!--                            <label for="gender" class="black-text mb-4 big">Gender</label>-->
<!--                            <div>-->
<!--                                <label class="mr-4">-->
<!--                                    <input class="with-gap" id="gender" name="gender" type="radio" value="m" />-->
<!--                                    <span>Male</span>-->
<!--                                </label>-->
<!--                                <label>-->
<!--                                    <input class="with-gap" name="gender" type="radio" value="f" />-->
<!--                                    <span>Female</span>-->
<!--                                </label>-->
<!--                            </div>-->
<!--                        </div>-->

                        <div class="row">
<!--                            <div class="form-group mb-2 col-xl-6 col-lg-6 col-md-6 col-12 pl-0 tm-form-group-2-col tm-form-group-2-col-l">-->
                                <!--<label for="expectedsalary" class="black-text mb-4 big">Expected Salary</label>
                                <select name="expectedsalary">
                                    <option value="-">Select</option>
                                    <option value="1000">$1,000 - 1,999</option>
                                    <option value="2000">$2,000 - 2,999</option>
                                    <option value="3000">$3,000 - 3,999</option>
                                </select>-->
<!--                            </div>-->
                            <label for="file" class="black-text mb-4 big">选择要上传的图片</label>

                        </div>
                            <div class="form-group mb-2 col-xl-6 col-lg-6 col-md-6 col-12 pr-0 tm-form-group-2-col tm-form-group-2-col-r">
                                <div class="file-field input-field" style="margin-left: -308px;">
                                    <div class="btn btn-white">
                                        <span>选择文件</span>
                                        <input id="file" type="file" name="browse">
                                    </div>
                                    <div class="file-path-wrapper">
                                        <input class="file-path validate" name="file" type="text" placeholder="your-photo.jpg">
                                    </div>
                                </div>
                        </div>

<!--
                        <div class="form-group">
                            <label for="message" class="black-text mb-4 big">Additional Message</label>
                            <textarea class="p-3" name="message" id="message" cols="30" rows="4"></textarea>
                        </div>-->
                    </div>
                    <div class="text-center mt-5">
                        <input type="submit" value="提交"  class="waves-effect btn-large btn-large-white"/>
                    </div>
                </form>
            </div>
        </div>
        <footer class="row tm-mt-big mb-3">
            <div class="col-xl-12 text-center">
                <p class="d-inline-block tm-bg-black white-text py-2 tm-px-5">
                    Copyright &copy; 2018 Company Name

                    - <a rel="nofollow" href="http://www.tooplate.com/view/2105-input">Input</a> by
                    <a rel="nofollow" href="http://tooplate.com" class="tm-footer-link">Tooplate</a>
                </p>
            </div>
        </footer>
    </div>

<!--    <script src="js/jquery-3.2.1.slim.min.js"></script>-->
    <script src="js/materialize.min.js"></script>
    <script>
        $(function () {
            var uid = getParameter("uid")
            $.post("/photograph/user/getUser",{uid:uid},
                function (data) {
                    $("#uid").val(data.data.uid);
                    $("#name").val(data.data.name);

                },"json")
            $.post("/photograph/CategoryServlet/findAllCid",
                function (data) {
                // alert(data[0].cname)
                    var cateList = '<label for="category" class="black-text mb-4 big">分类</label>\n' +
                        '                                <select name="category" style="display: block" >';
                    for(var i = 0; i < data.length;i++) {
                        cateList += '<option value="'+ data[i].cname +'">'+ data[i].cname +'</option>';
                    }
                    cateList += '</select>';
                    $("#category").html(cateList);

            },"json");

        })
        function submitPhoto() {
            var uid = getParameter("uid")
            var name = $("#name").val();
            var iname = $("#iname").val();
            var itag = $("#itag").val();
            alert(iname)
            $.post("/photograph/photo/insertImg", {uid:uid,name:name,iname:iname,itag:itag},
                function (data) {
                    if(data.flag){
                        alert("上传成功")
                        location.href="index.html"
                    }
                },"json")
        }

        function jump() {
            $("#uploadForm").ajaxSubmit(function (data) {
                alert("上传成功");
                location.href="index.html"
            });
            return false;
        }
    </script>
</body>

</html>